<template>
<div class="search-tab">
    <div class="header-search">
        <van-search
        shape="round"
        background="#fff"
        placeholder="搜索商品 分类 功效"
        class="input"
        @focus="openSearchArea"
        />
        <van-icon class="icon-bars" name="bars" @click="openSmallSearchArea"/>
    </div>

    <!--小搜索弹出框-->
    <van-popup
        v-model="isCollapseShow"
        position="right"
        :style="{ width: '85%',height: '100%' }"
        close-on-click-overlay
        close-on-popstate
    >
<!--    <div id="small-search-area" :class="isCollapseShow?'matte':''" @click.self="isCollapseShow = !isCollapseShow">-->
<!--      <transition name="app" mode="out-in">-->
        <div class="collapse" id="small-search-area">
          <form action="/">
            <van-search
              show-action
              placeholder="请输入搜索关键词"
              @focus="openSearchArea"
            >
                <div slot="action" @click="isCollapseShow = !isCollapseShow">返回</div>
            </van-search>
          </form>
          <van-collapse v-model="activeNames">
            <van-collapse-item v-for="(item,index) in rightTitle" :key="item.category_id" :title="item.name" :name="index">
              <div class="submenu" v-for="data in item.sub_categories" :key="data.category_id">
                <div @click="handleClick(data.category_id)">{{data.name}}</div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
<!--      </transition>-->
    </van-popup>
    <!--小搜索弹出框-->

    <!--大搜索弹出框-->
    <van-popup
        id="big-search-area"
        v-model="isBigSearchAreaShow"
        position="right"
        :style="{ width: '100%',height: '100%' }"
    >
        <div class="search-wrapper">
            <div class="top">
                <van-icon name="arrow-left" @click="openSmallSearchArea" />
                <van-search
                    v-model="searchValue"
                    placeholder="请输入搜索关键词"
                    show-action
                    shape="round"
                    autofocus="true"
                    @input="onSearch"
                >
                    <div slot="action" @click="onSearch">搜索</div>
                </van-search>
            </div>
            <div class="search-list">
                <van-cell v-for="item in searchResult" :key="item" is-link icon="search" @click="getSearchResult(item)">
                    <div v-html="item"/>
                </van-cell>
                <van-loading v-show="loading" type="spinner" color="#fe4070" >查询中...</van-loading>
            </div>
        </div>
    </van-popup>
    <!--大搜索弹出框-->
</div>
</template>
<script>
// import eSearch from '@/components/e-search'
export default {
    data () {
        return {
            rightTitle: [], // 右侧导航数据
            isCollapseShow: false,// 动态显示右侧固定导航
            activeNames: ['0'],
            isBigSearchAreaShow: false, // 大搜索显示
            searchValue: '', //   搜索内容
            searchResult: [],
            loading: false,
            finished: false,
        }
    },
    mounted () {
        this.axios({
            url: './json/test1.json',
            method: 'get'
        }).then(res => {
            console.log(res.data.data)
            this.rightTitle = res.data.data
            console.log(res.data.data[0].sub_categories[0].category_id);

        }).catch(err => console.log(err))
    },
    methods: {
        handleClick(id){
          console.log(id);
          this.$router.push(`/serach/index/${id}`)
        },
        openSearchArea() {
            console.log('开启大搜索区域')
            this.isBigSearchAreaShow = true
            this.isCollapseShow = false
        }, // 显示大搜索区
        openSmallSearchArea(){
            console.log('关闭')
            this.isBigSearchAreaShow = false
            this.isCollapseShow = true
        }, // 显示小搜索区
        onSearch(){
            this.loading = true
            console.log('搜索中..')
            this.axios({
                url:`/api1/index/requestDelegate?url=http%3A%2F%2Fmobile.jumei.com%2Fmsapi%2Fsearch%2Fsuggestion.json%3Fkeyword%3D${this.searchValue}%26url%3Dhttp%3A%2F%2Fmobile.jumei.com%2Fmsapi%2Fsearch%2Fsuggestion.json`,
                method: 'get',
            })
                .then(res => {
                    if (res.data.result === 0) {
                        this.searchResult = []
                    } else {
                        this.searchResult = [...res.data.data]
                    }
                    this.loading = false
                })
                .catch(err => {
                    console.log(err)
                })
            setTimeout(()=>{
                this.loading = false
            }, 10 * 1000)
        }, // 开始搜索
        getSearchResult(item){
            console.log(item, '原网站是后端渲染')
        },// TODO:跳转到搜索结果页面
    },
    // components: {eSearch}
}
</script>
<style lang="scss" scoped>
.header-search{
    width: 100%;
    height: 46px;
    line-height: 46px;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 555;
    .input{
      height: 46px;
      width: 90%;
      float: left;
    }
    .icon-bars{
      font-size: 30px;
      color: #ccc;
      float: right;
      line-height: 46px;
    }
  }
.collapse{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999;
    .submenu{
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
        height: 44px;
        line-height: 44px;
        background-color: #f4f4f4;
        border-bottom: 1px solid #fff;
    }
}
.matte{
    height:100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    overflow-y: auto;
}
.app-enter-active, .app-leave-active{
    transition: all .4s;
}
.app-enter, .app-leave-to{
    transform: translateX(80%);
    opacity: 0;
}
#small-search-area{
    z-index: 8888;
}
#big-search-area{
}
.big-search-show{
    z-index: 666;
}
.search-wrapper{
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    .top{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        &>.van-icon{
            flex: 1;
            font-size: 24px;
            text-align: center;
            padding: 0 10px;
        }
        &>.van-search{
            width: 85%;
        }
    }
    .search-list{
        .van-loading{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
    }
}

</style>
